<template>
<!--  计算记录列表-->
  <div>
    <div class="topbar">
      <label>筛选：</label>
      <el-select
        v-model="selectedModelType"
        placeholder="筛选"
        @change="unifiedHandle"
      >
        <el-option label="全部" value="全部"></el-option>
        <el-option label="单一容器" value="单一容器"></el-option>
        <el-option label="回转分区" value="回转分区"></el-option>
      </el-select>

      <label>排序：</label>
      <el-select
        v-model="selectedSortType"
        placeholder="排序方式"
        @change="unifiedHandle"
      >
        <el-option label="默认" value="origin"></el-option>
        <el-option label="按名称排序" value="name"></el-option>
        <el-option label="按时间排序" value="time"></el-option>
      </el-select>
    </div>
    <el-table
      :data="currentPageData"
      border
      style="width: 100%"
      max-height="82vh"
      height="69vh"
    >
      <!--                  <el-table-column  type="index" width="60"></el-table-column>-->
      <!--     <el-table-column  prop="_id" label="ID" width=""></el-table-column>-->
      <!--     <el-table-column type="index" label="序号" width="100%"></el-table-column>-->
      <el-table-column prop="" label="序号">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="model_name" label="模型名称"></el-table-column>
      <el-table-column prop="model_type" label="模型类别"></el-table-column>
      <el-table-column prop="GroupsOrOne" label="计算类型"></el-table-column>
      <el-table-column prop="save_time" label="保存时间"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <!--            <p>{{ scope.row}}</p>-->
          <el-button class="tablebutton" @click="handleEdit(scope.row)"
            >详情
            <el-icon>
              <edit></edit>
            </el-icon>
          </el-button>

          <el-button
            class="tablebutton"
            @click="showDeleteDialog(scope.row._id)"
            >删除
            <el-icon>
              <remove></remove>
            </el-icon>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--    填加的确定删除的弹窗-->
    <el-dialog
      style="border-radius: 4px"
      v-model="deleteDialogVisible"
      title="确认删除"
      width="30%"
    >
      <p>确定要删除该计算记录吗？</p>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            style="border-radius: 4px"
            @click="handleDelete"
            type="danger"
            >确定</el-button
          >
          <el-button style="border-radius: 4px" @click="cancelDelete"
            >取消</el-button
          >
        </span>
      </template>
    </el-dialog>

    <!--  页尾 开始-->
    <div class="footpage" style="">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-size="pageSize"
        :page-sizes="[2, 5, 10, 20]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!--  页尾结束-->
  </div>
</template>

<script>
// import historyCaculate from "@/data1/historyCaculate";
import router from "@/router";

export default {
  name: "CaculateHistory",
  data() {
    return {
      historyCaculate: [],
      deleteDialogVisible: false,
      deleteid: "",
      pageNum: 1,
      pageSize: 10,
      total: 0,
      model_Type: "",
      selectedModelType: "全部",
      selectedSortType: "time",
      filteredModelData: [],
      currentPageData: [],
      username: "",
    };
  },
  mounted() {
    this.username = localStorage.getItem("username");
    // this.load();
    this.load(() => {
      this.unifiedHandle();
    });
  },
  methods: {
    unifiedHandle() {
      //先分模型种类
      this.filteredModelData = this.handleModelTypeFilter();
      //再排序
      this.filteredModelData = this.sortedModelData(this.filteredModelData);
      //再赋值当前页的数据
      this.currentPageData = this.Show_CurrentPage(this.filteredModelData);
    },
    //返回当前页大小和页数的数据
    Show_CurrentPage(data) {
      // 计算起始索引
      const startIdx = (this.pageNum - 1) * this.pageSize;
      // 计算结束索引
      const endIdx = this.pageNum * this.pageSize - 1;
      const currentPageData = data.slice(startIdx, endIdx + 1);
      return currentPageData;
    },
    //返回当前所选模型种类的数据
    handleModelTypeFilter() {
      let typeFilterdata = [...this.historyCaculate];
      // this.load()
      if (this.selectedModelType === "全部") {
        this.total = this.historyCaculate.length;
        return typeFilterdata;
      } else {
        typeFilterdata = typeFilterdata.filter(
          (model) => model.model_type === this.selectedModelType,
        );
        this.total = typeFilterdata.length;
      }
      return typeFilterdata;
    },
    //返回当前所设置排序种类的数据
    sortedModelData(data) {
      const dataCopy = [...data]; // 复制一份数据以防止直接修改原数据
      console.log(dataCopy);
      if (this.selectedSortType === "name") {
        dataCopy.sort((a, b) => a.model_name.localeCompare(b.model_name));
      } else if (this.selectedSortType === "time") {
        dataCopy.sort(
          (a, b) =>
            new Date(b.save_time.replace(/-/g, "/")) -
            new Date(a.save_time.replace(/-/g, "/")),
        );
      }
      return dataCopy;
    },
    load(callback) {
      // console.log(JSON.stringify({
      //   username:this.username,
      //   page_num:1,
      //   page_size:2e6+10,
      //   model_type:this.model_Type
      // }))
      console.log(
        "输入表单信息:\n" +
          JSON.stringify({
            username: this.username,
            page_num: 1,
            page_size: 2e6 + 10,
            model_type: "单一容器",
          }),
      );
      this.request
        .post("/model/getCalList", {
          username: this.username,
          page_num: 1,
          page_size: 2e6 + 10,
          model_type: this.model_Type,
        })
        .then((res) => {
          if (res.code === 200) {
            console.log("请求成功");
            console.log(res);
            this.historyCaculate = res.data;
            // console.log("打印这个模型的历史计算\n" + this.historyCaculate);
            // // this.historyCaculate = res.data.map(item => JSON.parse(item));
            // console.log("打印处理过的历史计算\n" + this.historyCaculate);
          } else {
            this.$message.error(res.msg)
            // console.log(this.res.msg)
          }
          if (callback) {
            callback();
          }
        });

    },
    // 展示确定删除的弹窗
    showDeleteDialog(id) {
      this.deleteDialogVisible = true;
      this.deleteid = id;
    },
    handleDelete() {
      if (this.deleteid !== "") {
        this.request
          .post("/cal/delCalByid", {
            id: this.deleteid,
            username: this.username,
          })
          .then((res) => {
            if (res.code === 200) {
              // this.$message.success(res.msg);
              this.$message.success("删除成功");

              this.deleteDialogVisible = false;
              this.load(() => {
                this.unifiedHandle();
              });
            } else {
              this.$message.error(res.msg);
            }
          });
        this.deleteid = "";
      } else {
        this.$message.error("删除的id不存在");
      }
    },
    // 取消显示确定删除的弹窗
    cancelDelete() {
      this.deleteDialogVisible = false;
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.currentPageData = this.Show_CurrentPage(this.filteredModelData);
      // this.load()
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.currentPageData = this.Show_CurrentPage(this.filteredModelData);
      // this.load()
    },
    handleEdit(row) {
      this.form = Object.assign({}, row);
      // this.$emit("addtab",{title:"ID-"+row.ID+"的计算详情",route:"/1/c_h_d",selected:true})
      this.$emit("addtab", {
        title: "计算详情",
        route: "/1/c_h_d",
        selected: true,
      });
      // this.$emit("selectedcalculate", row._id);
      this.$emit("selectedcalculate", this.form);
      router.push({ path: "/1/c_h_d" });
      // this.$emit("sign",row)
    },
  },
};
</script>

<style lang="scss" scoped>
.topbar {
  display: flex;
  align-items: center;
  height: 45px;
  label {
    margin-left: 15px;
    font-size: 14px;
    font-weight: 500;
  }

  .el-select--big:first-of-type {
    width: 100px;
  }
  .el-select--big:nth-of-type(2) {
    width: 115px;
  }
}
.footpage {
  /*padding: 0.625em 0;*/
  font-size: 0.938em;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
/*消除下拉框的鼠标光标*/
.el-input__wrapper input {
  caret-color: transparent;
}
.tablebutton {
  border: 1.2px solid #409eff;
}
</style>
